<template>
	<view class="bond">
		<view class="" style="background: #fff;">
			<NavBar title="保证金">
				<!-- 	<template #right>
					<view class="topRight">
						<image src="/static/img/index/60.png" mode="widthFix"></image>
						常见问题
					</view>
				</template> -->
			</NavBar>
		</view>

		<!-- <view class="warn box">
			<view class="left">
				!
			</view>
			<view class="text">
				保证金未支付
				<text>商场最低保证金不低于1000元。请及时追缴保证金。</text>
			</view>
			<view class="close">
				关闭
				<text>x</text>
			</view>
		</view> -->
		<!-- 	<view class="success box">
			<view class="left">
				√
			</view>
			<view class="text">
				保证金已足额缴纳
				<text>保证金已足额缴纳</text>
			</view>
			<view class="close">
				关闭
				<text>x</text>
			</view>
		</view> -->
		<view class="amount">
			<view class="top">
				<view class="" @tap="closeRefund">
					关闭店铺
					<image src="/static/img/index/59.png" mode="widthFix"></image>
				</view>
			</view>
			<text class="text_1">保证金当前余额（元）</text>
			<text class="text_2">{{data.info.bondBalance || 0}}</text>
			<view class="bjz">
				<view class="">
					待补缴保证金
					<text>{{data.info.waitPayBond || 0}}</text>
				</view>
				<text></text>
				<view class="">
					保证金额
					<text>{{data.info.bondAmount || 0}}</text>
				</view>
			</view>
			<view class="sub">
				<text @tap="navTo('/pages/recharge/index')">立即补缴</text>
				<text @tap="returnDeposit">提出</text>
			</view>
		</view>
		<view class="record">
			<view class="top">
				保证金记录
				<!-- <view class=""> 查看更多 <image src="/static/img/index/58.png" mode="widthFix"></image>
				</view> -->
			</view>
			<scroll-view @scrolltolower="scrolltolower" scroll-y="true">
				<view class="listItem" v-for="(item,index) in data.result.list" :key="index">
					<view class="left">
						充值
						<text>{{item.createTime}}</text>
					</view>
					<text>+{{item.amount}}</text>
				</view>
			</scroll-view>

		</view>
	</view>
</template>

<script lang="ts" setup>
	import NavBar from '@/components/navBar.vue'
	import { reactive } from 'vue'
	import { storeBondInfo, pageBondRecord, closeStore } from '@/utils/api/shop'
	import { onShow } from '@dcloudio/uni-app';
	const data = reactive<any>({
		info: {},
		list: [],
		obj: { pageNo: 1, pageSize: 10 },
		result: { list: [] },
	})
	onShow(() => {
		data.obj.pageNo = 1;
		storeBondInfo().then((res) => {
			data.info = res.data;
		})
		requstList()
	})
	
	// 提取保证金
	const returnDeposit = () => {
		uni.navigateTo({
			url: '/pages/purse/withdrawal?walletType=BOND'
		})
	}
	
	const requstList = () => {
		if (data.obj.pageNo == 1) {
			data.result.list = [];
		}
		pageBondRecord().then((res) => {
			res.data.list = [...data.result.list, ...res.data.list];
			data.result = res.data;
		})
	}
	const scrolltolower = () => {
		if (data.result.total != data.result.list.length) {
			data.obj.pageNo += 1;
			requstList() 
		}
	}
	const navTo = (url) => {
		uni.navigateTo({
			url
		})
	}
	const closeRefund = () => {
		uni.showModal({
			title: '提示',
			content: '是否关店?',
			success: (e) => {
				if (e.confirm) {
					uni.showLoading({
						title: '加载中...',
						mask: true
					})
					closeStore().then((res) => {
						if (res.code == 200) {

							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/index/index'
								})
							}, 1000)
							uni.showToast({
								title: '关闭店铺成功!',
								icon: 'none'
							})
						}
					})
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	scroll-view {
		flex: 1;
		overflow: auto;
	}

	.bond {
		height: 100vh;
		background: #F4F6FA;
		display: flex;
		flex-direction: column;

		.topRight {
			display: flex;
			align-items: center;
			justify-content: flex-end;

			image {
				width: 36rpx;
				margin-right: 5rpx;
			}

			color: #8C8C8C;
		}

		>.top {
			display: flex;
			padding: 50rpx 32rpx 25rpx 32rpx;
			background: #fff;
			justify-content: space-between;

			.left {
				width: 200rpx;

				image {
					width: 36rpx;
				}
			}

			color: #333333;
			font-size: 32rpx;
		}

		.amount {
			margin: 36rpx 24rpx 48rpx 24rpx;
			background: #fff;
			border-radius: 24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 40rpx 32rpx;
			box-shadow: 0rpx 12rpx 36rpx 0rpx rgba(238, 239, 241, 0.8);

			.top {
				width: 100%;
				display: flex;
				justify-content: flex-end;

				>view {
					display: flex;
					align-items: center;
					padding: 4rpx 8rpx;
					border-radius: 8rpx;
					background: rgba(207, 220, 255, 0.50);
					font-size: 24rpx;
					color: #3F54DA;

					image {
						width: 32rpx;
						margin-left: 10rpx;
					}
				}
			}

			.text_1 {
				font-size: 32rpx;
				color: #444444;
				margin: 24rpx 0 16rpx 0;
			}

			.text_2 {
				font-size: 100rpx;
				color: #111111;
			}

			.bjz {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				margin: 48rpx 0 72rpx 0;

				>view {
					width: 48%;
					display: flex;
					flex-direction: column;
					align-items: center;
					color: #999999;
					font-size: 24rpx;

					text {
						color: #111111;
						font-size: 32rpx;
						margin-top: 15rpx;
					}
				}

				>text {
					width: 1rpx;
					height: 64rpx;
					background: #EBEBEB;
				}
			}

			.sub {
				display: flex;
				justify-content: space-between;
				width: 100%;

				text:nth-of-type(1) {
					line-height: 88rpx;
					border-radius: 88rpx;
					text-align: center;
					color: #fff;
					flex: 1;
					margin-right: 20rpx;
					background: #6B64D3;
					box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(107, 100, 211, 0.3);
				}

				text:nth-of-type(2) {
					width: 258rpx;
					line-height: 88rpx;
					border-radius: 88rpx;
					text-align: center;
					font-size: 32rpx;
					background: #E4E2FC;
					box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(107, 100, 211, 0.1);
					color: #6B64D3;
				}
			}
		}

		.record {
			margin: 0 24rpx;
			padding: 0 24rpx;
			border-radius: 24rpx;
			background: #fff;
			flex: 1;
			overflow: auto;
			display: flex;
			flex-direction: column;

			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 24rpx 0 32rpx 0;
				font-size: 32rpx;
				color: #262626;

				view {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #8C8C8C;

					image {
						width: 36rpx;
					}
				}
			}

			.listItem {
				padding: 32rpx 0;
				border-top: 1rpx solid #E5E5E5;
				display: flex;
				align-items: center;
				justify-content: space-between;

				>text {
					color: #6AC922;
					font-size: 32rpx;
				}

				.left {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					color: #262626;

					text {
						color: #8C8C8C;
						margin-top: 5rpx;
					}
				}
			}
		}

		.success {
			background: #EDFFE8;

			.left {
				background: #10B809;
			}

			.text {
				color: #10B809;
			}

			.close {
				color: #10B809;

				text {
					color: #10B809;
				}
			}
		}

		.warn {
			background: #FFF7E8;

			.left {
				background: #FF8C00;
			}

			.text {
				color: #FF8C00;
			}

			.close {
				color: #FF8916;

				text {
					color: #FF8916;
				}
			}
		}

		.box {
			padding: 18rpx 34rpx;
			display: flex;
			align-items: flex-start;

			.left {
				width: 36.6rpx;
				height: 36.6rpx;
				border-radius: 50%;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.text {
				flex: 1;
				margin: 0 16rpx;
				display: flex;
				flex-direction: column;

				text {
					color: #262626;
					font-size: 24rpx;
					line-height: 1.5;
					margin-top: 10rpx;
				}
			}

			.close {
				display: flex;
				align-items: center;

				text {
					font-size: 34rpx;
					margin-left: 5rpx;
				}
			}
		}
	}
</style>